<template>
	<view>
		<view class="cu-bar bg-white search">
			<button @click="onShowCategory()" class="cu-btn round line-green margin-left">
				{{activeCategory.id ? activeCategory.title : '选择舞台品类'}}
			</button>
			<view class="action">
				<view class="cu-capsule round">
					<view v-for="(item,index) in types" :key="index" @click="type=item.value"
						:class="type == item.value ? 'bg-red':''" class="cu-tag padding">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="cu-bar search bg-white">
			<view class="search-form round" @click="toSearch()">
				<text class="cuIcon-search"></text>
				<input :adjust-position="false" type="text" placeholder="搜索产品" confirm-type="search"></input>
			</view>
		</view>
		<GoodsList :category_id="activeCategory.id" :type="type"></GoodsList>
		<view class="cu-modal drawer-modal justify-start" :class="showCategory ? 'show':''">
			<view class="cu-dialog basis-lg">
				<view class="cu-bar solid-bottom">
					<view class="action">
						舞台品类
					</view>
					<view class="action">
						<text @click="showCategory=false" class="lg text-gray cuIcon-close"></text>
					</view>
				</view>
				<view class="grid-d grid-cols-2 gap-2 padding">
					<view @click="clickCategory(item)" class="cu-tag round padding margin-left-0"
						:class="activeCategory.id == item.id ? 'bg-green':'line-grey'" v-for="(item,index) in categorys"
						:key="index">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import GoodsList from "@/pages/goods/list.vue"
	import GoodsApi from "@/api/goods"
	import ConfigApi from "@/api/config"
	export default {
		components: {
			GoodsList
		},
		data() {
			return {
				showCategory: false,
				categorys: [],
				activeCategory: {},
				type: '',
				types: [{
					name: '全部',
					value: 0
				}, {
					name: '可售',
					value: 1
				}],
			}
		},
		mounted() {
			
		},
		methods: {
			clickCategory(item) {
				this.activeCategory = item
				this.showCategory = false;
				ConfigApi.add({
					key: 'home_category',
					value: item
				})
			},
			getCategory() {
				GoodsApi.category().then((res) => {
					this.categorys = res
				})
			},
			onShowCategory(){
				this.getCategory();
				this.showCategory = true
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/home/search'
				});
			}
		}
	}
</script>

<style>
</style>
